<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据列过滤设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/common-yd.js"></script>
<script type="text/javascript" src="../js/table-yd.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<link rel="stylesheet" href="../css/common-yd.css"></link>
<link rel="stylesheet" href="../css/table-yd.css"></link>
<link rel="stylesheet" href="../css/bootstrap.min.css"></link>
<link rel="stylesheet" href="../css/bootstrap-select.css"></link>
<link rel="stylesheet" href="../css/EPRIS.css"></link>
<style type="text/css">
.filterMultiType{
	float:left;
	width:80px;
	margin-left:10px;
	height:32px;
	line-height:32px;
	padding-left:20px;
	background-image:url(../images/rxtree_off.png);
	background-size:20px;
	background-repeat: no-repeat;
	background-position: 0 6px;
	cursor:pointer;
}
.selectMultiType{
	background-image:url(../images/rxtree_on.png);
}
.btnCommon{
	height:30px;
	line-height:30px;
	width:80px;
	text-align:center;
	display:block;
}
.multiTypeLine{
	position:absolute;
	left:30px;
	height:35px;
	width:30px;
	border:1px dashed #FFFFFF;
	border-right:0px;
}
.multiRelaDelBtn{
	height:20px;
	width:20px;
	cursor:pointer;
}
.multiRelaItems{
	margin:8px 10px 8px 60px;
	height:35px;
	width:calc(100% - 75px);
	
}
</style>
</head>
<body oncontextmenu="return false" style="padding:10px 20px 0 20px;" onresize="refreshPageElement()">
<div style="height:100%;width:100%;">
	<div style="height:50px;width:100%;">
		<div style="float:left;width:80px;height:50px;line-height:50px;text-align:right;">过滤字段：</div>
		<div style="float:left;height:32px;width:calc(100% - 100px);border:1px solid #197BFD;border-radius:5px;margin-top:9px;">
			<select id="filterColCombo" class="selectpicker selectdiv" style="width:100%;height:30px;border:0px;" data-width="100%" title="" onchange="refreshFilterSet()"></select>
		</div>
	</div>
	<div style="height:50px;width:100%;">
		<div style="float:left;width:80px;height:50px;line-height:50px;text-align:right;">条件形式：</div>
		<div id="selectMultiType" style="float:left;height:32px;width:calc(100% - 100px);margin-top:9px;">
			<div class="filterMultiType selectMultiType" type="1" onclick="changeFilterMultiType(this)">单条件</div>
			<div class="filterMultiType" type="2" onclick="changeFilterMultiType(this)">或条件</div>
			<div class="filterMultiType" type="3" onclick="changeFilterMultiType(this)">且条件</div>
		</div>
	</div>
	<div style="height:50px;width:100%;">
		<div style="float:left;width:80px;height:50px;line-height:50px;text-align:right;">过滤条件：</div>
		<div id="addMoreFilterItem" style="float:left;width:20px;height:20px;margin-left:10px;padding-top:15px;display:none;">
			<img src="../images/plus_blue.png" style="width:18px;height:18px;cursor:pointer;" onclick="addMultiFilterItem()"/>
		</div>
	</div>
	<div id="showFilterItemSet" style="width:100%;">
		<div id="singleFilterItem" style="height:30px;width:100%;padding-top:20px;"></div>
		<div id="multiFilterItem" style="position:relative;height:100px;width:100%;overflow:auto;display:none;"></div>
	</div>
	<div style="height:50px;width:100%;display:inline-flex;align-items:center;padding-left:calc(50% - 85px);">
		<label class="btnCommon btnSure" style="margin-right:5px;" onclick="sureColsFilterSet()">确定</label>
		<label class="btnCommon btnClose" style="margin-left:5px;" onclick="closeColsFilterSet()">取消</label>
	</div>
</div>
<script type="text/javascript">
var editCol = null;
var tableCols = null, colFilter = null;
var tableColMap = {};
$(function(){
	var paramMap = getPageParameterMap();
	refreshPageElement();
	editCol = paramMap.editCol||null;
	tableCols = paramMap.tableCols;
	colFilter = paramMap.colFilter||[];
	initColumnComboList();
	if(colFilter!=null&&colFilter.length>0) reshowSettedColFilter();
});

function initColumnComboList(){
	$('#filterColCombo').empty();
	for(var i=0;i<tableCols.length;i++){
		var thisCols = tableCols[i];
		tableColMap[thisCols[0]] = thisCols;
		var colCode = thisCols[0], colComment = thisCols[1];
		$('#filterColCombo').append("<option value='"+colCode+"'>"+colComment+"</option>");
	}
	$("#filterColCombo").selectpicker("refresh");
	$("#filterColCombo").selectpicker("setStyle", "background", "transparent");
	$("#filterColCombo").selectpicker('val', editCol||tableCols[0][0]);
	refreshFilterSet();
}

function reshowSettedColFilter(){
	$('#selectMultiType').find('.selectMultiType').removeClass('selectMultiType');
	for(var i=0;i<colFilter.length;i++){
		var multiType = colFilter[i][2], relaType = colFilter[i][3], matchVal = colFilter[i][4];
		if(i==0){
			$('#selectMultiType').find('.filterMultiType[type="'+multiType+'"]').click();
		}
		if(multiType=='1'){
			$('#singleFilterItem').find('#singleRelaCombo').val(relaType);
			$('#singleFilterItem').find('input').val(matchVal);
		}else{
			if(i>=2) addMultiFilterItem();
			$('#multiFilterItem').find('select:eq('+i+')').val(relaType);
			$('#multiFilterItem').find('input:eq('+i+')').val(matchVal);
		}
	}
}

function refreshFilterSet(){
	$('#selectMultiType').find('.selectMultiType').removeClass('selectMultiType');
	changeFilterMultiType($('#selectMultiType').find('.filterMultiType:first'));
}

function changeFilterMultiType(clickEle){
	if($(clickEle).hasClass('selectMultiType')) return;
	$('#selectMultiType').find('.selectMultiType').removeClass('selectMultiType');
	$(clickEle).addClass('selectMultiType');
	$('#singleFilterItem,#multiFilterItem').empty();
	if($(clickEle).attr('type')=='1'){
		$('#addMoreFilterItem').hide();
		$('#singleFilterItem').show();
		$('#multiFilterItem').hide();
		$('#singleFilterItem').html('<div style="float:left;height:32px;width:120px;border:1px solid #197BFD;border-radius:5px;margin-left:50px;">'
								   +'    <select id="singleRelaCombo" style="width:100%;height:30px;border:0px;border-radius:5px;"></select>'
								   +'</div>'
								   +'<input type="text" style="height:32px;width:calc(100% - 195px);margin-left:5px;"/>');
		refreshMultiRelaCombo('singleRelaCombo');
	}else{
		$('#addMoreFilterItem').show();
		$('#singleFilterItem').hide();
		$('#multiFilterItem').show();
		addMultiFilterItem();
		addMultiFilterItem();
	}
}

function addMultiFilterItem(){
	var multiType = $('#selectMultiType').find('.selectMultiType').attr('type');
	var typeName = multiType=='2' ? '或' : '且';
	var existCount = $('#multiFilterItem').find('.multiRelaItems').length;
	if(existCount!=0){
		var lineTop = 28 + 44*(existCount - 1);
		var lineHTML = '<div class="multiTypeLine" style="top:'+lineTop+'px;"><label style="position:absolute;left:-7px;top:7px;">'+typeName+'</label></div>';
		$('#multiFilterItem').append(lineHTML);
	}
	var selectUUID = getUUID();
	var itemHTML = '<div class="multiRelaItems">'
				 + '    <div style="float:left;height:32px;width:100px;border:1px solid #197BFD;border-radius:5px;">'
				 + '        <select id="'+selectUUID+'" style="width:100%;height:30px;border:0px;border-radius:5px;"></select>'
				 + '    </div>'
				 + '    <input type="text" style="height:32px;width:calc(100% - 135px);margin-left:5px;"/>';
	if(existCount>=2) itemHTML += '    <img class="multiRelaDelBtn" src="../images/delete_blue.png" onclick="deleteFilterItems(this)"/>';
	itemHTML += '</div>';
	$('#multiFilterItem').append(itemHTML);
	refreshMultiRelaCombo(selectUUID);
}

function refreshMultiRelaCombo(selectUUID){
	var colCode = $('#filterColCombo').val();
	var colType = tableColMap[colCode][2];
	var optionList = [];
	if(colType=='2'){//数字
		optionList = [['1','等于'],['2','不等于'],['3','大于'],['4','大于等于'],['5','小于'],['6','小于等于'],['11','为空'],['12','不为空']];
	}else{
		optionList = [['1','等于'],['2','不等于'],['7','包含'],['8','不包含'],['9','开头为'],['10','结尾为'],['11','为空'],['12','不为空'],['13','空文本'],['14','非空文本']];
	}
	$('#'+selectUUID).empty();
	for(var i=0;i<optionList.length;i++){
		var thisData = optionList[i];
		$('#'+selectUUID).append("<option value='"+thisData[0]+"'>"+thisData[1]+"</option>");
	}
}

function deleteFilterItems(delEle){
	$(delEle).parent().remove();
	var newFilter = [];
	var colCode = $('#filterColCombo').val();
	var colComment = tableColMap[colCode][1];
	var multiType = $('#selectMultiType').find('.selectMultiType').attr('type');
	$('#multiFilterItem').find('.multiRelaItems').each(function(e){
		var relaType = $(this).find('select').val();
		var matchVal = $(this).find('input').val();
		newFilter.push([colCode, colComment, multiType, relaType, matchVal]);
	});
	colFilter = newFilter;
	$('#multiFilterItem').empty();
	addMultiFilterItem();
	addMultiFilterItem();
	reshowSettedColFilter();
}

function refreshPageElement(){
	var bodyHeight = document.body.offsetHeight;
	$('#showFilterItemSet').height(bodyHeight-210);
}

function sureColsFilterSet(){
	var newFilter = [];
	var colCode = $('#filterColCombo').val();
	var colComment = tableColMap[colCode][1];
	var multiType = $('#selectMultiType').find('.selectMultiType').attr('type');
	if(multiType=='1'){//单条件
		var relaType = $('#singleFilterItem').find('#singleRelaCombo').val();
		var matchVal = $('#singleFilterItem').find('input').val();
		newFilter.push([colCode, colComment, multiType, relaType, matchVal, "1"]);
	}else{//且/或条件
		$('#multiFilterItem').find('.multiRelaItems').each(function(e){
			var relaType = $(this).find('select').val();
			var matchVal = $(this).find('input').val();
			newFilter.push([colCode, colComment, multiType, relaType, matchVal, e+1]);
		});
	}
	closeDialog({colCode:colCode, filterSet:newFilter});
}

function closeColsFilterSet(){
	closeDialog(false);
}
</script>
</body>
</html>